<!-- 
 支付列表渲染
 支付选择会同步给params.payment_type字段（双向绑定）

例子：
<jp-payment-select ref="paymentRef" :paymentType.sync="params.payment_type" :list="items"
			@closeQRCode="closeQRCode"></jp-payment-select>
			
item: [{
		value: 'ALIPAY',
		name: '支付宝支付',
		image: '../../static/svg/alipay.svg'
	},
	{
		value: 'ABC',
		name: '农行支付',
		image: '../../static/svg/pay_bank_abc.svg'
	}
]

// 如需使用二维码支付，调用openQRCode方法可打开二维码支付弹框
this.$refs.paymentRef.openQRCode(payUrl)
// 代码调用关闭二维码支付弹窗
this.$refs.paymentRef.closeQRCode()
// 监听二维码弹窗关闭
closeQRCode() {
	//关闭二维码付款弹窗，可关闭订单状态接口轮询
} -->

<template>
	<view class="jp-payment-select jp-flex-column" :style="style">
		<text class="text-label-mini" style="padding-bottom: 12rpx;">请选择支付方式</text>

		<!-- 二维码支付弹窗 -->
		<jp-popup ref="pbPopup" mode="center" round="12rpx">
			<template #header>
				<view class="qr-code-header jp-flex-row jp-main-between jp-cross-baseline">
					<view style="width: 40rpx;"></view>
					<text class="text-content"
						style="line-height: 70rpx;font-size: 38rpx; margin-top: 24rpx;">请用{{payment_type == 'WXPAY_QR'?'微信':'支付宝'}}扫描二维码付款</text>
					<u-icon name="close-circle" @click="closeQRCode" size="36rpx" bold color="#00000060"
						style="padding: 0 16rpx;"></u-icon>
				</view>
			</template>
			<view class="jp-flex-column jp-cross-center">
				<image v-if="pay_url" class="qr-code" :src="pay_url">
				</image>
				<view v-else class="qr-code jp-flex-column jp-cross-center jp-main-center">
					<jp-empty show text="支付信息获取失败" icon="coupon" marginTop="0"></jp-empty>
				</view>
			</view>
			<template #footer></template>
		</jp-popup>

		<view class="row jp-flex-row jp-main-between jp-cross-center" v-for="(item, index) in list" :key="index"
			@click="change(item)">
			<view class="jp-flex-row jp-cross-center">
				<image :src="item[keyIcon]"></image>
				<text class="text-content-mini">{{ item[keyName] }}</text>
			</view>
			<template v-if="item.value == payment_type">
				<u-icon name="checkmark-circle-fill" color="var(--uni-color-primary)" size="40rpx"></u-icon>
			</template>
			<template v-else>
				<view class="circle"></view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		name: "jp-payment-select",
		props: {
			paymentType: {
				type: String,
			},
			list: {
				type: Array,
				default: () => []
			},
			keyName: {
				type: String,
				default: 'name'
			},
			keyValue: {
				type: String,
				default: 'value'
			},
			keyIcon: {
				type: String,
				default: 'image'
			},
			customStyle: {
				type: [Object, String],
				default: () => {
					return {
						"padding": "0 32rpx",
					}
				}
			}
		},
		data() {
			return {
				pay_url: null,
				payment_type: null,
				style: null,
			};
		},
		watch: {
			paymentType: {
				handler(newVal, oldVal) {
					this.payment_type = newVal
				},
				immediate: true
			},
			customStyle: {
				handler(newVal, oldVal) {
					if (newVal instanceof Object) {
						newVal = uni.$u.addStyle(newVal, 'string')
					}
					this.style = newVal
				},
				immediate: true
			},
		},
		methods: {
			/**
			 * @description 打开二维码支付弹窗
			 * @param {Object} payUrl 二维码支付图片链接
			 */
			openQRCode(payUrl) {
				this.pay_url = payUrl
				this.$refs.pbPopup.show = true
			},
			/**
			 * @description 关闭二维码支付弹窗
			 */
			closeQRCode() {
				this.$refs.pbPopup.show = false
				this.$emit('closeQRCode')
			},
			/**
			 * @description 支付方式变动回调
			 */
			change(item) {
				this.payment_type = item[this.keyValue]
				this.$emit('update:paymentType', this.payment_type)
				this.$emit('change', this.payment_type)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jp-payment-select {
		.row {
			font-size: 28rpx;
			margin-bottom: 20rpx;
			padding: 20rpx 30rpx;
			border-radius: 16rpx;
			border: 2rpx solid rgba(0, 0, 0, 0.1);
			background-color: #fff;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
			}
			.circle {
				width: 32rpx;
				height: 32rpx;
				border-radius: 16rpx;
				border: 2rpx #86909C solid;
				margin-right: 8rpx;
			}
		}

		.qr-code-header {
			font-size: 32rpx;
			font-weight: 500;
			width: 600rpx;
			padding-right: 20rpx;
		}

		.qr-code {
			width: 500rpx;
			height: 500rpx;
		}
	}
</style>